<template>
  <van-loading type="spinner" v-if="loading" size="0.5rem" />
  <van-icon
    v-else
    :color="value ? '#f49d12' : '#777'"
    :name="value ? 'good-job' : 'good-job-o'"
    @click="onlike"
  />
</template>

<script>
import { addlikeAPI, removlikeAPI } from "@/api";
export default {
  props: {
    id: {
      type: [Number, String],
      required: true,
    },
    value: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    async onlike() {
      try {
        this.loading = true;
        if (this.value) {
          await removlikeAPI(this.id);
        } else {
          await addlikeAPI(this.id);
        }
        this.$emit("update:value", this.value ? 0 : 1);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style>
</style>